
{% extends 'base.html' %}

{% block css%}
<style type="text/css">

.display_resp {
    background: #FFFFCC;
}

</style>
{% endblock %}

{% block body%} 
<div class="row">

    <div class="col-md-12">

        <h3>Lower Page</h3>
        <table class='table table-striped table-responsive'>
        <tr>
        <td>00 <input class="my_checkbox" type='checkbox' id='lower_00' checked disabled> </td>
        </tr>
        </table>


        <h3>Upper Page (00~FF) <button class='btn btn-primary btn-sm' id='unchk_btn'>Check/Uncheck All</button>
        </h3>
        <div id="pages"></div>

        <hr>
        <table class='table table-striped table-responsive'>
        <tr>
        <td>
        Dump Format
        </td>
        <td>
        HTML <input class="my_checkbox" type='checkbox' id='html'> 
        </td>
        <td>
        TXT <input class="my_checkbox" type='checkbox' id='txt'> 
        </td>
        <td>
        CSV <input class="my_checkbox" type='checkbox' id='csv'  checked disabled> 
        </td>
        <td>
        <i id="btn_export_parameters_loading" class="fa fa-refresh fa-spin fa-fw" style="font-size: 24px;color: blue;"></i>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <button class='btn btn-success btn-lg' id='dump'><i class="fa fa-download" aria-hidden="true"></i> Dump</button>
        </td>
        </tr>

        <tr>
        <td colspan="6" id="download_entry">
        </td>
        </tr>

        </table>

    </div>

</div>
{% endblock %}


{% block js%} 
{{ super() }}

<script>
var chk_flag = 0;
p = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];


function pages()
{
    var row_str = "<table class='table table-striped table-responsive'>";
    for(i=0; i<p.length; i++)
    {
        
        var cell_str = "<tr>";
        for(j=0; j<p.length; j++)
        {
            cell_str += "<td>" + p[i] + p[j] + " " + "<input class='my_checkbox' type='checkbox' id='" + p[i] + p[j] + "'> </td>";
        }
        cell_str += "</tr>"
        
        row_str += cell_str;
    }
    
    row_str += "</table>";
    
    
    $("#pages").html(row_str);
}

$(document).ready(function(){
$("#btn_export_parameters_loading").hide();
pages();

$("#unchk_btn").click(function(){
    if (chk_flag == 1) //if checked
    {
        //go to uncheck!!!
        chk_flag = 0;
        for(i=0; i<p.length; i++)
        {
            for(j=0; j<p.length; j++)
            {
                $("#"+p[i]+p[j]).removeAttr('checked');
            }
        }     
    }
    else
    {
        chk_flag = 1;
        for(i=0; i<p.length; i++)
        {
            for(j=0; j<p.length; j++)
            {
                $("#"+p[i]+p[j]).attr('checked','');
            }
        } 
    }

});


$("#dump").click(function() {
    $("#btn_export_parameters_loading").show();
    p_list = []
    format_list = []

    for(i=0; i<p.length; i++)
    {
        for(j=0; j<p.length; j++)
        {
            if($("#" + p[i] + p[j]).prop("checked") == true)
            {
                p_list.push( p[i] + p[j] );
            }
        }
    }
    console.log(p_list);
    var p_list_data = JSON.stringify(p_list);


    if($("#html").prop("checked") == true) format_list.push(1); else format_list.push(0);
    if($("#txt").prop("checked") == true) format_list.push(1); else format_list.push(0);
    if($("#csv").prop("checked") == true) format_list.push(1); else format_list.push(0);
    var format_list_data = JSON.stringify(format_list);


    $.post(
        "api/dump_cmis_data", {
            'p_list_data' : p_list_data,
            'format_list_data' : format_list_data,
        },
        function(data, status) {
             // show download data link
            $("#download_entry").html(data);
            $("#btn_export_parameters_loading").hide();           
        }
    );


    
});

});
</script>
{% endblock %}

